<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>images</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        /*#app {*/
           /*width: 1330px;*/
            /*margin: 0 auto;*/
            /*padding-bottom: 20px;*/
            /*padding-top: 10px;*/
        /*}*/

        /*.myImg {*/
            /*width: 300px;*/
            /*height: 200px;*/
            /*margin-left: 20px;*/
            /*margin-top: 12px;*/
            /*border: 5px solid #ccab29;*/
            /*cursor: pointer;*/
        /*}*/

        .myImg {
            width: 42%;
            height: 80px;
            margin-left: 15px;
            margin-top: 12px;
            border: 3px solid #ccab29;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div id="app"></div>

<script>

    // // config
    // const options = {
    //     url: 'http://localhost:9090'
    // }
    //
    // // getImgList API
    // let getImgList = async () => {
    //     let result = await (await fetch(options.url + '/getImgList')).json();
    //     return result;
    // }
    //
    // // init
    // (async () => {
    //     let r = await getImgList();
    //     renderDOM(r);
    // })();
    //
    // // render elements
    // function renderDOM(arrList) {
    //     let el = document.getElementById('app');
    //     let str = '';
    //     arrList.forEach(item => {
    //         str += `<img class="myImg" src="${item}">`;
    //     });
    //     el.innerHTML = str;
    // }

</script>

<script src="js/jquery.min.js"></script>
<script>

    // config
    const options = {
        url: 'http://192.168.1.4:9090'
    }

    // getImgList API
    let getImgList = async () => {
        let result = await (await fetch(options.url + '/getImgList')).json();
        return result;
    }

    // init
    (async () => {
        let r = await getImgList();
        renderDOM(r);
    })();

    // render elements
    function renderDOM(arrList) {
        let el = document.getElementById('app');
        let str = '';
        arrList.forEach(item => {
            str += `<img class="myImg" src="${item}">`;
        });
        el.innerHTML = str;
    }
</script>
</body>
</html>